<template>
  <div>
    <a-modal
      :closable="false"
      :footer="null"
      :keyboard="false"
      :maskClosable="false"
      :rules="formRules"
      title="关于我"
      v-model:open="dialogVisible"
    >
      <a-form
        :model="formState"
        name="basic"
        autocomplete="off"
        @finish="onFinish"
        @finishFailed="onFinishFailed"
        labelAlign="left"
        :label-col="{ style: { width: '60px' } }"
      >
        <a-form-item label="真实姓名" name="realname">
          <a-input size="large" allowClear v-model:value="formState.realname"></a-input>
        </a-form-item>
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="性别" name="realname">
              <a-select
                v-model:value="formState.gender"
                size="large"
                :options="genderOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="年龄" name="realname">
              <a-select
                v-model:value="formState.gender"
                size="large"
                :options="genderOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="国籍" name="realname">
              <a-select
                v-model:value="formState.gender"
                size="large"
                :options="genderOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="所在地区" name="realname">
              <a-select
                v-model:value="formState.gender"
                size="large"
                :options="genderOptions"
              >
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <selectable-buttons :options="languageOptions" label="语言" mode="multiple">
        </selectable-buttons>
        <selectable-buttons :options="educationOptions" label="教育水平">
        </selectable-buttons>
        <selectable-buttons :options="permitOptions" label="许可证" mode="multiple">
        </selectable-buttons>
        <selectable-buttons :options="typeOptions" label="类型评级" mode="multiple">
        </selectable-buttons>
      </a-form>

      <a-row>
        <a-col :span="3" :offset="21">
          <a-button type="primary">保存</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import SelectableButtons from "../SelectableButtons.vue";

// ------------------------------ 变量 ------------------------------

const dialogVisible = ref(false); // 显隐弹窗

const genderOptions = ref([
  { value: 0, label: "女" },
  { value: 1, label: "男" },
]);
const languageOptions = ref([
  { value: 0, label: "中文" },
  { value: 1, label: "英文(精通)" },
  { value: 2, label: "英文(普通)" },
  { value: 3, label: "粤语" },
]);
const educationOptions = ref([
  { value: 0, label: "博士" },
  { value: 1, label: "硕士" },
  { value: 2, label: "本科" },
  { value: 3, label: "高中及以下" },
]);
const permitOptions = ref([
  { value: 0, label: "EASE-B1" },
  { value: 1, label: "EASE-B1" },
  { value: 2, label: "CAAC" },
  { value: 3, label: "FAA" },
  { value: 4, label: "HKCAD-B1" },
  { value: 5, label: "HKCAD-B2" },
  { value: 6, label: "其他" },
]);
const typeOptions = ref([
  { value: 0, label: "A21" },
  { value: 1, label: "TRENTXWB" },
  { value: 2, label: "A380" },
  { value: 3, label: "FAA" },
  { value: 4, label: "GP7200" },
  { value: 5, label: "T900" },
  { value: 6, label: "B737NG" },
  { value: 7, label: "其他" },
]);

interface FormState {
  // 表单接口
  realname: String;
  gender: Number;
}

const formState = reactive<FormState>({
  // 表单
  realname: "",
  gender: 1,
});

const formRules = {
  // 表单验证
  realname: [{ required: true, message: "请输入您的姓氏", trigger: "blur" }],
};

// ------------------------------ 变量 ------------------------------

// ------------------------------ 方法 ------------------------------

// 弹窗时浏览器是否可滑动
const pageScroll = (scroll?: boolean) => {
  if (scroll) {
    document.body.style.overflowY = "auto";
    document.documentElement.style.overflow = "auto";
    document.body.style.height = "inherit";
    document.documentElement.style.height = "inherit";
  } else {
    document.body.style.overflowY = "hidden";
    document.documentElement.style.overflow = "hidden";
    document.body.style.height = "100%";
    document.documentElement.style.height = "100%";
  }
};

// ------------------------------ 方法 ------------------------------

// ------------------------------ 事件 ------------------------------

function onFinish() {}
function onFinishFailed() {}

// ------------------------------ 事件 ------------------------------

// 生命周期
onMounted(() => {
  // pageScroll()
});
</script>

<style lang="lses" scoped></style>
